html, body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

#app {
  padding: 10px;
}

button {
  cursor: pointer;
}

.home {
  display: flex;
}

.gameList {
  margin-right: 10px;
  padding: 5px;
  border: 1px solid #bbb;
  background-color: #eee;
}

.gameList > button {
  width: 100%;
}

.gameList a {
  text-decoration: none;
  color: #25c;
}

.gameList .gameItem {
  margin-top: 5px;
}

.gameList .timestamp {
  font-size: smaller;
}

.game {
  display: flex;
}

.gameStatus {
  margin-left: 10px;
  margin-bottom: 10px;
  padding: 5px;
  border: 1px solid #bbb;
  background-color: #eee;
}

.gameStatus > div {
  flex: 1;
  margin-bottom: 3px;
}

.gameStatus > div:last-child {
  margin-bottom: 0;
}

.gameStatus > div > img {
  height: 22px;
  width: 22px;
  vertical-align: middle;
  border-width: 2px;
  border-style: solid;
  border-color: #aaa;
  background-color: #ddd;
  margin-right: 5px;
}

.gameStatus > div > img.nextMove {
  border-color: #9090c0;
  background-color: #c0c0ff;
}

.moveHistory {
  margin-left: 10px;
  padding: 5px;
  border: 1px solid #bbb;
  background-color: #eee;
}

.moveHistory > .title {
  font-weight: bold;
  margin-bottom: 5px;
}
